<template>
  <div class="newsList" ref="newsList">
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!-- list列表 -->
      <van-list v-model="loading" :finished="finished" @load="onLoad">
        <van-cell
          v-for="(item, index) in list"
          :key="index"
          @click="toDetail(item)"
        >
          <!-- 方法的传参，传递的是实参，因为在另一个方法中需要用到item.id -->
          <!-- 设置detai组件的路由入口，并携带参数id -->
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <div class="title">{{ item.title }}</div>
            <!-- 图片区域 -->
            <van-grid :border="false" :column-num="item.cover.type">
              <van-grid-item
                v-for="(subitem, subindex) in item.cover.images"
                :key="subindex"
              >
                <van-image :src="subitem" />
              </van-grid-item>
            </van-grid>
            <!-- 文章信息区域 -->
            <div class="info">
              <div class="left">
                <span>{{ item.aut_name }}</span>
                <span>{{ item.comm_count }}评论</span>
                <span>{{ item.pubdate | timeFilter }} </span>
              </div>
              <div class="right">
                <van-icon name="cross" />
              </div>
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticlesApi } from '@/api'
// import moment from 'moment'

export default {
  mounted () {
    // 数据渲染完毕后获取滚动scrollTop
    // 给newList加一个scroll事件
    this.$refs.newsList.onscroll = () => {
      this.scrollTop = this.$refs.newsList.scrollTop
      // console.log(this.scrollTop)
    }
  },
  // 组件被激活时把保存的高度赋值给滚动条
  activated () {
    this.$refs.newsList.scrollTop = this.scrollTop
  },
  props: {
    channelId: {
      type: Number,
      required: true,
      scrollTop: 0
    }
  },
  data () {
    return {
      list: [],
      loading: false, // list组件是否处于加载状态，true正在加载，不触发onload事件;
      finished: false, // 数据源是否加载完成，true加载完毕，不在触发onload事件
      timestamp: Date.now(),
      refreshing: false // 下拉组件的加载状态，true正在加载，不触发refresh事件
    }
  },

  methods: {
    toDetail (item) {
      this.$router.push(`/detail?id=${item.art_id}`)
    },
    async onLoad () {
      // 先获取params中参数
      // console.log(this.channelId)
      // 发起请求
      const res = await getArticlesApi({
        channel_id: this.channelId,
        timestamp: Date.now()
      })
      console.log(res)
      // 保存数据
      // this.list = res.data.data.results//不能直接覆盖数据，要把后面的数据拼接 到前面的数据后
      this.list = [...this.list, ...res.data.data.results]
      this.timestamp = res.data.data.pre_timestamp
      // 手动将loading的值改为false,即回触发load事件
      this.loading = false
      // 当data中的pre_timestamp不存在时,数据源中数据已经加载完成，将finished值改为true,不在触发load事件
      if (!res.data.data.pre_timestamp) {
        this.finished = true
      }
    },
    onRefresh () {
      // 清空数据源
      this.list = []
      this.finished = false // 开启数据源的加载
      this.timestamp = Date.now() // 重新获取时间搓
      this.refreshing = false
      this.loading = true // 将loading 改为为true,
      this.onLoad() // 重新加载数据
    }
  }
}
</script>

<style lang="less">
.newsList {
  // background-color: greenyellow;
  position: fixed;
  top: 90px;
  bottom: 50px;
  left: 0;
  right: 0;
  overflow: auto;
  padding: 0 10px;
  .title {
    font-size: 16px;
  }

  .info {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #666;
    .left {
      span {
        margin: 0 5px;
      }
    }
  }
}
</style>
